import React, {Component} from 'react'
import TypeList from './TypeList'
import style from './Type.module.scss'
import {connect} from "react-redux";
import {Button, Modal} from 'antd';
import Add from './component/Add'

class Type extends Component {
    state = {
        visible: false,
    };

    handleCancel = () => {
        this.setState({
            visible: false
        })
    };
    add = () => {
        this.setState({
            visible: true,
        })
    }

    render() {
        const {  visible } = this.state;
        return (
            <div>
                <div className={style.top}>
                    <Button onClick={this.add} type="primary" style={{ marginLeft: 30 }}>
                        新增
                    </Button>
                </div>
                <div className={style.middle}>
                    <TypeList />
                </div>
                <div>
                    <Modal destroyOnClose visible={visible} title='新增' footer={null} onCancel={this.handleCancel} handleCancel={this.handleCancel}>
                        <Add handleCancel={this.handleCancel} />
                    </Modal>
                </div>
            </div>
        )
    }
}

const mapState = state => ({
    ...state.circleType

});

const mapDispatch = dispatch => ({
    ...dispatch.circleType
})

export default connect(mapState, mapDispatch)(Type);